W głąb dostępności

Dzień 11: Przeskakiwanie menu strony

Jeśli nie udało Ci się przerobić swoich stron tak, aby prezentować najpierw główną zawartość, możesz pójść na pewien kompromis: zrób dodatkowy link do przeskoczenia menu. To nie jest idealne rozwiązanie (lepiej żeby główna treść strony pokazywała się jako pierwsza) ale jest akceptowalne i używane na wielu stronach.

Link do "przeskoczenia" menu, prowadzący od razu do głównej treści, jest zwykłym tagiem <a> jak każdy inny link, ale dzięki odpowiedniemu ustawieniu stylów CSS jest niewidoczny w przeglądarkach graficznych. Taki link nie wpływa na układ strony - jakby go w ogóle nie było.

Kto na tym skorzysta?

1. Marek skorzysta. Kiedy odwiedza Twoją stronę, Lynx pokaże ten link (ponieważ nie obsługuje stylów CSS) i to umożliwi Markowi przeskoczenie od razu do głównej treści strony. Zobacz Dzień 10: Główna treść jako pierwsza, gdzie opisano dlaczego to jest tak bardzo istotne.
2. Jadzia skorzysta. Kiedy odwiedzi Twoją stronę, JAWS przeczyta ten link co umożliwi jej przeskoczenie całego menu i przejście od razu do głównej treści.

Jak to zrobić?

Przede wszystkim użyj narzędzia Lynx Viewer lub programu Lynx aby sprawdzić czy na Twojej stronie linki nawigacyjne i menu są prezentowane przed główną treścią. Jeżeli główna treść strony jest pierwsza, to ta wskazówka Ciebie nie dotyczy - masz dzień wolny.

Następnie zdefiniuj regułę CSS dla linków przeskakujących menu tak, aby były niewidoczne w przeglądarkach graficznych. Jeżeli masz zewnętrzny plik ze stylami, umieść tą regułę na jego końcu. (Jeżeli masz wiele zewnętrznych plików ze stylami, umieść tą regułę w pliku zgodnym z Netscape 4.) Jeżeli masz style zdefiniowane w tagu <style> w szablonie strony, dodaj tą regułę na początku, zaraz za tagiem <style>.

.skiplink {display:none}

Teraz wstaw link do przeskakiwania menu zaraz za nagłówkiem Twojej strony.

• blog.pl: trudno jednoznacznie określić gdzie jest to miejsce w Twoim szablonie. Poszukaj kodu wstawiającego nagłówek, tytuł czy nazwę bloga - prawdopodobnie będzie to linia zawierająca zmienną {ksywa}. Na pewno musisz wybrać miejsce przed linkiem do księgi gości oraz zmiennymi {linki} i {archiwum}.
• niByLog: miejsce wstawienia tego linku zależy od tego co masz umieszczone na stronie głównej przed wywołaniem skryptu niByLoga oraz w szablonie nagłówka; na pewno musi to być miejsce po nagłówku strony a przed menu - albo na stronie głównej albo w szablonie nagłówka bloga.
• Movable Type: za fragmentem zawierającym <$MTBlogTitle$> i <$MTBlogDescription$>.
• Greymatter: nie ma określonej zmiennej w szablonie wstawiającej tytuł; poszukaj nazwy bloga.
• Radio: za <%siteName%> i <%description%>.
• Manila: za {homePageLink (siteName)} i {tagLine}.
• Blogger: za <$BlogTitle$>.

Zaraz za tym wstaw następujący link:

<a class="skiplink" href="#startcontent">Przeskocz menu</a>

Następnie trzeba wstawić tag wskazujący miejse docelowe dla powyższego linku. Powinien on się znaleźć na samym początku głównej treści Twojej strony, to znaczy tuż przed pierwszym wpisem.

• blog.pl: tuż przed zmienną {blog}.
• niByLog: na samym końcu szablonu nagłówka bloga.
• Movable Type: przed <MTEntries>.
• Greymatter: na szablonie "Main Index Template", przed {{logbody}}. Na szablonie "Entry Page Templates", przed {{entrymainbody}}.
• Radio: przed <%bodytext%>.
• Manila: przed {bodytext}.
• Blogger: przed <Blogger>.

Format taga docelowego zależy od wersji HTML jakiej używasz. Sprawdź swój nagłówek DOCTYPE, a następnie użyj jednego z poniższych kodów:

1. Jeżeli używasz któregokolwiek wariantu HTML 4, dopisz ten kod:

   <a name="startcontent"></a>

2. Jeżeli używasz któregokolwiek wariantu XHTML 1.0, użyj takiego kodu:

   <a name="startcontent" id="startcontent"></a>

3. Jeżeli używasz XHTML 1.1, użyj takiego kodu:

   <a id="startcontent"></a>

Pamiętaj, żeby taki link przeskakujący menu był na każdej stronie Twojej witryny; sprawdź wszystkie podstrony i szablony.

Autor: Mark Pilgrim
Tłumaczenie i lokalizacja: Michał Świątkiewicz
Rozprowadzane na licencji GNU FDL (www.gnu.org, www.gnu.org.pl)
Oryginalna wersja: http://diveintoaccessibility.org/
Polska wersja: http://mimas.ceti.pl/dia/